<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view style="padding-bottom: 120rpx;" class="qwer">

	<!-- 	<view class="" style="color: #007AFF;position: absolute;right:10rpx">
			<navigator url="../authoriza/authoriza">
				授权记录
			</navigator>
		</view> -->
		<!-- 照片 -->
	<!-- 	<view class="photo">
			<cut-picture v-model='resident.picture' />
			<view style="color: #007AFF;font-size: 28rpx;margin-bottom: 40rpx;">请上传该住户正面照片</view>
		</view> -->

		<!-- <view class="true"></view> -->
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="resident" ref="form" validateTrigger="bind" class="word5">

			<uni-forms-item required label="住户姓名" name="name">
				<input maxlength="50" placeholder="请输入住户姓名" v-model='resident.name' @input="binddata('name',$event.detail.value)">
			</uni-forms-item>

			<uni-forms-item required label="身份证号" name="personId">
				<input maxlength="18" placeholder="请输入身份证号" @input="binddata('personId',$event.detail.value)" v-model='resident.personId'>
			</uni-forms-item>
			<uni-forms-item required label="小区">
				{{projName}}
			</uni-forms-item>
			<uni-forms-item required label="房屋" name="roomIds">
				<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
			</uni-forms-item>
			<uni-forms-item required label="住户类型" name="residentType">
				<single-picker placeholder="请选择住户类型" @input="binddata('residentType',$event)" v-model="resident.residentType" :list="types.residentTypeList2"></single-picker>
			</uni-forms-item>
			<uni-forms-item required label="居住类型" name="occupancyType">
				<single-picker placeholder="请选择居住类型" @input="binddata('occupancyType',$event)" v-model="resident.occupancyType"
				 :list="types.occupancyTypeList"></single-picker>
			</uni-forms-item>
			<uni-forms-item required label="入住状态" name="occupancyState">
				<single-picker placeholder="请选择入住状态" @input="binddata('occupancyState',$event)" v-model="resident.occupancyState"
				 :list="types.occupancyStateList"></single-picker>
			</uni-forms-item>
			<uni-forms-item required label="车牌号" name="carPlate">
				<input maxlength="50" placeholder="请输入车牌号(没有填'无')" v-model='resident.carPlate' @input="binddata('carPlate',$event.detail.value)">
			</uni-forms-item>
			<uni-forms-item required label="车位号" name="carNo">
				<input maxlength="50" placeholder="请输入车位号(没有填'无')" @input="binddata('carNo',$event.detail.value)" v-model='resident.carNo'>
			</uni-forms-item>
			<uni-forms-item required label="是否养宠物" name="pets">
				<radio-button-group placeholder="请选择是否养宠物" @input="binddata('pets',$event)" v-model="resident.pets" :items="types.pets"></radio-button-group>
			</uni-forms-item>
			<uni-forms-item required label="宠物类型" name="petType" v-show="resident.pets ==2 ">
				<my-checkbox-group placeholder="请选择宠物类型" @input="binddata('petType',$event)" v-model="resident.petType" :items="types.petTypeList"></my-checkbox-group>
			</uni-forms-item>

			<uni-forms-item required label="宠物照片" name="petUrl" v-show="resident.pets ==2 ">
				<imageUploader @input="binddata('petUrl',$event)" v-model="resident.petUrl" :max="1" />
			</uni-forms-item>
			<button class="btn" :disabled="isDisabled" @click="submitForm">确认</button>
		</uni-forms>

	</view>
</template>

<script>
	import singlePicker from "@/myComponents/single-picker.vue"
	import radioButtonGroup from "@/myComponents/radio-button-group.vue"
	import myCheckboxGroup from "@/myComponents/my-checkbox-group.vue"
	import imageUploader from "@/myComponents/image-uploader.vue"
	import cutPicture from "@/myComponents/cut-picture.vue"
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		components: {
			singlePicker,
			radioButtonGroup,
			myCheckboxGroup,
			imageUploader,
			cutPicture
		},
		data() {
			return {
				types: this.$types,
				resident: {
					residentId: uni.getStorageSync('userInfo').id, //户主id
					name: null,
					projId: uni.getStorageSync('projId'),
					personId: null,
					company: null,
					roomIds: [],
					carPlate: [],
					carNo: [],
					residentType: null,
					picture: null,
					occupancyType: null,
					occupancyState: null,
					pets: null,
					petType: null,
					petUrl: null,
				},
				//表单验证规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					carPlate: {
						rules: [{
							required: true,
							errorMessage: '请输入车牌号',
						}, ]
					},
					carNo: {
						rules: [{
							required: true,
							errorMessage: '请输入车位号',
						}, ]
					},
					personId: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						}, {
							//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
							pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
							errorMessage: '身份证号码格式不正确',
						}]
					},
					projId: {
						rules: [{
							required: true,
							errorMessage: '请选择小区',
						}, ]
					},
					roomIds: {
						rules: [{
							required: true,
							errorMessage: '请选择房屋',
						}, ]
					},
					residentType: {
						rules: [{
							required: true,
							errorMessage: '请选择住户类型',
						}, ]
					},
					occupancyType: {
						rules: [{
							required: true,
							errorMessage: '请选择居住类型',
						}, ]
					},
					occupancyState: {
						rules: [{
							required: true,
							errorMessage: '请选择入住状态',
						}, ]
					},
					pets: {
						rules: [{
							required: true,
							errorMessage: '请选择是否养宠物',
						}, ]
					},
					petType: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if ((value && value.length > 0) || this.resident.pets != 2) {
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择宠物类型')
								}
							}
						}, ]
					},
					petUrl: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if ((value && value.length > 0) || this.resident.pets != 2) {
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择上传宠物照片')
								}
							}
						}, ]
					}
				},
				projName: uni.getStorageSync("userInfo").projName,
				list: [],
				roomList: [],

				visible: false,
				isRead: false,
				time: 10,
				candidates: [],

				isDisabled: false,

			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
			this.getRoomList(this.resident.projId)
		},
		onShow() {


		},
		methods: {

			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {

					// if (!this.resident.picture) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: "请上传住户正面照片"
					// 	})
					// 	return
					// }
					console.log('表单数据信息：', res);
					res.petUrl = res.petUrl && res.petUrl[0]
					res.roomIds = [res.roomIds]
					res.carPlate = res.carPlate.replace('，', ',').split(',')
					res.carNo = res.carNo.replace('，', ',').split(',')
					res.petType = res.petType && res.petType.map(x => parseInt(x))
					res.residentId = uni.getStorageSync('userInfo').id
					// this.resident.roomIds = [this.resident.roomIds]
					this.register(Object.assign({}, {
						...this.resident
					}, res))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},


			// 获取房屋列表
			getRoomList(projId) {
				let list = uni.getStorageSync('userInfo').rooms
				list.forEach(item => {
					if (item.partition !== '') {
						item.label = item.partition + '-' + item.buildingNo + '-' + item.unitNo + '-' + item.roomNo
					} else {
						item.label = item.buildingNo + '-' + item.unitNo + '-' + item.roomNo
					}

					this.candidates.push({
						value: item.id,
						label: item.label
					})
				})
				this.candidates.sort((x, y) => {
					if (x.label > y.label) {
						return 1
					}
					return -1
				})

				// console.log(this.roomList)

			},
			// 注册
			register(resident) {
				this.isDisabled = true
				uni.showLoading({
					title: '注册中'
				})
				//录入用户
				this.$http.post('common/user/input', resident).then(res => {
					uni.hideLoading()
					this.isDisabled = false
					if (res.code === 10000) {

						uni.showModal({
							title: '提示',
							content: '住户录入成功',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '../index/index'
									})
								}
							}
						});
					}
				})
			},

		}
	}
</script>

<style lang="scss">
.qwer {

	.photo {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	input {
		height: 50rpx;
	}

	.btn {
		width: 536rpx;
		height: 72rpx;
		background: #FF971C;
		border-radius: 36px;
		color: #fff;
		line-height: 72rpx;
		margin-top: 80rpx;
		// margin-bottom: 100rpx;
	}

	.dialog {
		width: 100%;
		height: 173%;
		background-color: #4c4c4c;
		// opacity: 0.7;
		position: absolute;
		left: 0;
		top: 0;
	}

	.toast {
		width: 650rpx;
		height: 975rpx;
		// border-radius: 20rpx;
		position: fixed;
		left: 50rpx;
		top: 100rpx;
		color: #333;
		background-color: #fff;
		z-index: 99;

		// ::-webkit-scrollbar{
		// width: 0;
		// height: 0;
		// color: transparent;
		// }
		.scroll {
			text-align: justify;
			padding: 0 0rpx 0 30rpx;
			height: 890rpx;

			// background-color: pink;
			.title {
				display: flex;
				justify-content: center;
				font-size: 34rpx;
				color: #323232;
				font-weight: bold;
				margin-top: 27rpx;
				margin-bottom: 40rpx;
			}

			.scroll-item {
				padding-right: 20rpx;
				text-indent: 2em;
				color: #666;
				font-size: 28rpx;
				line-height: 45rpx;
			}

			.none {
				text-indent: 0;
			}

			.scroll-item-title {
				margin: 12rpx 0;
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.bottom {
			height: 86rpx;
			width: 100%;
			background-color: #FF971C;
			color: #fff;
			text-align: center;
			line-height: 86rpx;
		}

		.countdown {
			background-color: #fff;
			height: 85rpx;
			width: 100%;
			color: #000;
			text-align: center;
			line-height: 85rpx;
		}

		.mask {
			width: 650rpx;
			height: 88rpx;
			position: relative;
			bottom: 85rpx;
			left: 0;
			// background-color: pink;
			background-color: #4c4c4c;
			opacity: 0.7;
			z-index: 9999;
		}
	}
}
</style>
